<template>
  <div class="top">
    <div class="name">
    <p class="el-icon-search">
      空闲实验室查询
    </p>
    </div>
    <div class="secondContent">
      <div class="content">
        <div>
          <h1>
            当前年份：{{schoolYear.year}}
            当前学期：{{schoolYear.termNumber}}
            当前周：{{schoolYear.thisWeek}}
            开学时间：{{schoolYear.yearBegin}}
            放假时间：{{schoolYear.yearEnd}}
          </h1>
        </div>
        <el-form :inline="true" :model="applyForm" class="demo-form-inline">
          <el-form-item label="实验室楼号：">
            <el-select v-model="applyFormHouse" placeholder="请选择">
              <el-option
                :label="item"
                :value="item"
                v-for="(item,index) in applyForm.house"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="实验室类别：">
            <el-select v-model="applyFormType" placeholder="请选择">
              <el-option
                :label="item"
                :value="item"
                v-for="(item,index) in applyForm.type"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>

        <el-row>
          <el-col :span="8">
            <div class="timesOfWeek">
              <table height="60" cellspacing="0" align="center" cellpadding="6">
                <tr>
                  <td rowspan="2">周次</td>
                  <td
                    v-for="(item,index) in timesOfWeekArr"
                    :key="index"
                    @click="timesOfWeek(index)"
                    :class=" item.isbg ? timesOfWeekStyle : '' "
                  >{{item.item}}</td>
                  <td rowspan="2" @click="clearTimesOfWeek">清除</td>
                </tr>
                <tr>
                  <td
                    v-for="(item,index) in timesOfWeekArr2"
                    :key="index"
                    @click="timesOfWeek(index+9)"
                    :class=" item.isbg ? timesOfWeekStyle : '' "
                  >{{item.item}}</td>
                </tr>
              </table>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="week">
              <table height="60" cellspacing="0" align="center" cellpadding="10">
                <tr>
                  <td>星期</td>
                  <td
                    v-for="(item,index) in weekArr"
                    :key="index"
                    @click="week(index)"
                    :class=" item.isbg ? weekStyle : '' "
                  >{{item.item}}</td>
                  <td @click="clearWeek">清除</td>
                </tr>
              </table>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="section">
              <table height="60" cellspacing="0" align="center" cellpadding="6">
                <tr>
                  <td rowspan="2">节次</td>
                  <td colspan="4">上午</td>
                  <td colspan="4">下午</td>
                  <td colspan="3">晚上</td>
                  <td rowspan="2" @click="clearSection">清除</td>
                </tr>
                <tr>
                  <td
                    v-for="(item,index) in sectionArr"
                    :key="index"
                    @click="section(item.item)"
                    :class=" item.isbg ? sectionStyle : '' "
                  >{{item.item}}</td>
                </tr>
              </table>
            </div>
          </el-col>
        </el-row>

        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            v-for="(value,name,index) in tableDatas"
            :key="index"
            :prop="name"
            :label="value"
            width="150"
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" >申请</el-button> -->
              <el-button @click="dialogFormVisible = true;handleEdit(scope.$index, scope.row)">申请</el-button>
             
            </template>
          </el-table-column>
        </el-table>

 <el-dialog title="实验室信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                  <el-form-item label="实验室ID" :label-width="formLabelWidth" >
                    <el-input v-model="form.labId" autocomplete="off" readonly="readonly" ></el-input>
                  </el-form-item>
                  <el-form-item label="实验室名称" :label-width="formLabelWidth" >
                    <el-input v-model="form.labName" autocomplete="off" readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="实验室位置" :label-width="formLabelWidth" >
                    <el-input v-model="form.labPosition" autocomplete="off" readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="实验室楼号" :label-width="formLabelWidth" >
                    <el-input v-model="form.labHouse" autocomplete="off" readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="最大容纳量" :label-width="formLabelWidth" >
                    <el-input v-model="form.labMaxUser" autocomplete="off" readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="实验室类型" :label-width="formLabelWidth" >
                    <el-input v-model="form.labType" autocomplete="off" readonly="readonly"></el-input>
                  </el-form-item>
                  <el-form-item label="实验室申请原因" :label-width="formLabelWidth" >
                    <el-input type="textarea" v-model="form.labQuery" autocomplete="off" cols="30" rows="5" placeholder="请填写申请原因"></el-input>
                  </el-form-item>
                  <p :class="{warn: form.labQuery.length > 100}">{{form.labQuery.length}}/100</p>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="dialogFormVisible = false"  >确定</el-button>
                   <el-button @click="submitApplication" :disabled="form.labQuery.length> 100">提交申请</el-button>
                </div>
              </el-dialog>

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          background
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {
  applyForm,
  freeLaboratory,
  schoolYear,
  addlabapply
} from "@/api/laboratoryApply/laboratoryApply.js";



export default {
  data() {
    return {
      applyForm: {
        type: [],
        house: [],
      },

      applyFormType: "",
      applyFormHouse: "",

      schoolYear: {},

      tableData: [],
      tableDatas: {
        labId: "ID",
        labName: "名称",
        labPosition: "位置",
        labHouse: "楼号",
        labMaxUser: "最大容纳",
        labSite: "site",
        labStatus: "状态",
        labType: "实验室类型",
      },

      query: {
        timesOfWeek: [],
        week: [],
        section: [],
      },

      currentPage: 1,
      pageSize: 5,
      count: 10,
      pageSizes: [5, 10],

      timesOfWeekStyle: "weekRed",
      weekStyle: "weekRed",
      sectionStyle: "weekRed",

      timesOfWeekArr: [
        { isbg: false, item: 1 },
        { isbg: false, item: 2 },
        { isbg: false, item: 3 },
        { isbg: false, item: 4 },
        { isbg: false, item: 5 },
        { isbg: false, item: 6 },
        { isbg: false, item: 7 },
        { isbg: false, item: 8 },
        { isbg: false, item: 9 },
      ],
      timesOfWeekArr2: [
        { isbg: false, item: 10 },
        { isbg: false, item: 11 },
        { isbg: false, item: 12 },
        { isbg: false, item: 13 },
        { isbg: false, item: 14 },
        { isbg: false, item: 15 },
        { isbg: false, item: 16 },
        { isbg: false, item: 17 },
        { isbg: false, item: 18 },
      ],
      weekArr: [
        { isbg: false, item: 1 },
        { isbg: false, item: 2 },
        { isbg: false, item: 3 },
        { isbg: false, item: 4 },
        { isbg: false, item: 5 },
        { isbg: false, item: 6 },
        { isbg: false, item: 7 },
      ],
      sectionArr: [
        { isbg: false, item: 1 },
        { isbg: false, item: 2 },
        { isbg: false, item: 3 },
        { isbg: false, item: 4 },
        { isbg: false, item: 5 },
        { isbg: false, item: 6 },
        { isbg: false, item: 7 },
        { isbg: false, item: 8 },
        { isbg: false, item: 9 },
        { isbg: false, item: 10 },
        { isbg: false, item: 11 },
      ],
       dialogFormVisible: false,
        form: {
          labId: '',
          labName: '',
          labPosition: '',
          labHouse: '',
          labMaxUser: '',
          labType: '',
          labQuery:'',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '120px'
    };
  },
  mounted() {
    applyForm({}).then((response) => {
      this.applyForm.house = response.data.house;
      this.applyForm.type = response.data.type;
    });

    freeLaboratory({
      data: {
        applyWeek: this.query.timesOfWeek.join(","),
        applyDay: this.query.week.join(","),
        applyDate: this.query.section.join(","),
        termYear: this.schoolYear.year,
        termNumber: this.schoolYear.termNumber,
        labType: this.applyFormType,
        labHouse: this.applyFormHouse,
        labStatus: 0,
      },
      page: this.currentPage,
      limit: this.pageSize,
    }).then((response) => {
      for (let i = 0; i < response.data.length; i++) {
            if (response.data[i].labStatus == 0) {
              response.data[i].labStatus = "正常";
            }else{
               response.data[i].labStatus = "废除";
            }
          }
      this.tableData = response.data;
      this.count = response.count;
    });

    schoolYear({})
      .then((response) => {
        this.schoolYear = response.data;
      })
      .catch((error) => {
        console.log(error.data);
      });
  },
  methods: {
    onSubmit() {
      // if (this.query.week.length == 0 && this.query.timesOfWeek.length == 0 && this.query.section.length == 0){
      let submits = {
        data: {
          applyWeek: this.query.timesOfWeek.join(","),
          applyDay: this.query.week.join(","),
          applyDate: this.query.section.join(","),
          termYear: this.schoolYear.year,
          termNumber: this.schoolYear.termNumber,
          labType: this.applyFormType === '全部'? '':this.applyFormType,
          labHouse: this.applyFormHouse === '全部'? '':this.applyFormHouse,
          labStatus: 0,
        },
        page: 1,
        limit: 5,
      };

      freeLaboratory(submits).then((res) => {
        //这里就写成功后的操作
        if (res.code == 0) {
          console.log(123456798);
           for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].labStatus == 0) {
              res.data[i].labStatus = "正常";
            }else{
               res.data[i].labStatus = "废除";
            }
          }
          this.tableData = res.data;
          this.count = res.count;
          this.handleCurrentChange();
        }
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      console.log(this.pageSize);
    },
    handleCurrentChange(val) {
      this.currentPage = val || 1;
      console.log(this.currentPage);
      let submits = {
        data: {
          applyWeek: this.query.timesOfWeek.join(","),
          applyDay: this.query.week.join(","),
          applyDate: this.query.section.join(","),
          termYear: this.schoolYear.year,
          termNumber: this.schoolYear.termNumber,
          labType: this.applyFormType === '全部'? '':this.applyFormType,
          labHouse: this.applyFormHouse === '全部'? '':this.applyFormHouse,
          labStatus: 0,
        },
        page: this.currentPage,
        limit: this.pageSize,
      };
      freeLaboratory(submits).then((res) => {
        //这里就写成功后的操作
        if (res.code == 0) {
           for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].labStatus == 0) {
              res.data[i].labStatus = "正常";
            }else{
               res.data[i].labStatus = "废除";
            }
          }
          this.tableData = res.data;
          this.count = res.count;
        }
      });
    },

    timesOfWeek(index) {
      if (index < 9) {
        for (let i = 0; i < this.timesOfWeekArr.length; i++) {
          if (i == index) {
            this.timesOfWeekArr[i].isbg = true;
            console.log(this.timesOfWeekArr[i].isbg);
          }
        }
      } else {
        for (let i = 0; i < this.timesOfWeekArr2.length; i++) {
          if (i + 9 == index) {
            this.timesOfWeekArr2[i].isbg = true;
            console.log(this.timesOfWeekArr2[i].isbg);
          }
        }
      }

      this.query.timesOfWeek.push(index + 1);
      this.query.timesOfWeek = [...new Set(this.query.timesOfWeek)];
      this.query.timesOfWeek.sort((a, b) => a - b);
      console.log(this.query.timesOfWeek);
    },
    clearTimesOfWeek() {
      this.query.timesOfWeek = [];
      for (let item of this.timesOfWeekArr) {
        item.isbg = false;
      }
      for (let item of this.timesOfWeekArr2) {
        item.isbg = false;
      }
    },

    week(index) {
      for (let i = 0; i < this.weekArr.length; i++) {
        if (i == index) {
          this.weekArr[i].isbg = true;
          console.log(this.weekArr[i].isbg);
        }
      }
      console.log(this.weekArr);

      this.query.week.push(index + 1);
      this.query.week = [...new Set(this.query.week)];
      this.query.week.sort((a, b) => a - b);
    },
    clearWeek() {
      this.query.week = [];
      for (let item of this.weekArr) {
        item.isbg = false;
      }
    },

    section(item) {
      for (let i = 0; i < this.sectionArr.length; i++) {
        if (i + 1 == item) {
          this.sectionArr[i].isbg = true;
          console.log(this.sectionArr[i].isbg);
        }
      }

      this.query.section.push(item);
      this.query.section = [...new Set(this.query.section)];
      this.query.section.sort((a, b) => a - b);
      console.log(this.query.section);
    },
    clearSection() {
      this.query.section = [];
      for (let item of this.sectionArr) {
        item.isbg = false;
      }
    },

    handleEdit(index, row) {
      console.log(index, row);
      this.form.labId=row.labId;
      this.form.labName=row.labName;
      this.form.labPosition=row.labPosition;
      this.form.labHouse=row.labHouse;
      this.form.labMaxUser=row.labMaxUser;
      this.form.labType=row.labType;

    },
    submitApplication(){
      let arr={
        data:[{
          labId:this.form.labId,
          reason:this.form.labQuery,
          applyWeek:this.query.timesOfWeek.join(","),
          applyDay:this.query.week.join(","),
          applyDate:this.query.section.join(","),
          userNumber:"0",
          termNumber:this.schoolYear.termNumber,
          termYear:this.schoolYear.year
        }]
      };

      addlabapply(arr).then((res) => {
        console.log(res);
        //这里就写成功后的操作
        if (res.code == 0) {
          console.log(res);
        }
      });

    }
  },
};
</script>

<style lang="scss" scoped>
.top {
  background-color: white;
}
 .name{
   width: 100%;
  height: 80px;
  background-color: rgb(113, 194, 241);
  
}
.name p{
  font-size: 30px;
  margin: 0;
  line-height: 100px;
  color: white;
  font-family: "宋体",sans-serif;
  display: inline-block;
}
.content {
  height: 560px;
  margin: 20px 10px;
  // border: 1px solid gray;
  background-color: white;
}
.secondContent {
  height: 600px;
  margin: 15px 30px;
  // border: 1px solid rgb(148, 146, 146);
}
h1{
  font-family: "宋体",sans-serif;
}
table {
  border: 1px solid black;
}
table tr td {
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  margin: 0px;
}
.weekRed {
  background-color: rgb(113, 194, 241);
}
.query {
  margin: 50px;
  float: right;
}
.warn{
            color: rgb(113, 194, 241);
        }
</style>